<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录状态</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">
    <link href="css/common.css" rel="stylesheet">
    <style>
        body{
            font-size: 12px;
        }
        #isActive .green{
            background: rgb(63, 184, 103);
            color: #fff;
            text-align: center;
            padding: 3vw 0;
        }
        table{
            text-align: center;
            width: 100%;
        }
        .green-btn{
            border: 1px solid #01ba3e;
            width: 80%;
            padding: 2vw 1vw;
            border-radius: 7px;
            color: #01ba3e;
        }
        .hisDiv{
            background: #8dc9e1;
            color: #fff;
            text-align: center;
            padding: 3vw 0;
        }
        .grey-table th,.grey-table td{
            padding: 2vw 0;
            border: 1px solid #fff;
        }
        .yellow{
            color: #edd200;
        }
    </style>
</head>
<body>
<div class="head-nav">
    <div class="nav-left" onclick="javascript:history.back(-1)"><img src="img/gua/u18.png"></div>
    <div class="nav-title">登录状态</div>
</div>
<div class="main">
    <div id="isActive" style="display: none">
        <div class="green">当前状态：在线</div>
        <table>
            <tr>
                <td width="30%">
                    <div><img src="img/gua/youxiji.jpg" style="width: 26vw"></div>
                    <div id="shopName"></div>
                </td>
                <td width="45%" style="text-align: left;">
                    <div>在线时长：<span class="yellow">0</span>分钟</div>
                    <div>登陆时间：</div>
                    <div id="loginTime"></div>
                </td>
                <td>
                    <div class="green-btn" onclick="loginOut()">退出登录</div>
                </td>
            </tr>
        </table>
    </div>
    <div>
        <div class="hisDiv">历史登录记录</div>
        <div>
            <table class="grey-table" cellspacing="0">
                <thead>
                    <tr>
                        <th width="41%">登陆时间</th>
                        <th width="39%">门店</th>
                        <th>机器</th>
                    </tr>
                </thead>
                <tbody id="logTable">

                </tbody>
            </table>
        </div>
    </div>
</div>


<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/common.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>

<script type="application/javascript">
    var userId =$.cookie("userId");
    var machineId;
    $(function () {
        initLogin();
    });

    function  initLogin() {
        var paramStr = {};
        paramStr.userId = userId;
        var params = {};
        params.paramStr = JSON.stringify(paramStr);
        Common.ajaxWithParam("/fenful/api/v1/login/getMachineLoginLog", params, function(data) {
            console.log(data);
            //第一条代表当前状态
            if(data.length>0){
                var obj = data[0];
                if(obj.status=='1'){
                    $("#shopName").text(ifNull(obj.shop_name+obj.machine_name));
                    $("#loginTime").text(obj.login_time);
                    subTimes(obj.login_time);
                    machineId = obj.machine_id;
                    $("#isActive").show();
                }
                for(var i=0;i<data.length;i++){
                    var model = data[i];
                    if(model.status=='1'){
                        var tr="<tr><td>"+model.login_time+"</td>"
                            +"<td>"+ifNull(model.shop_name)+"</td>>"
                            +"<td>"+ifNull(model.machine_name)+"</td>"
                            +"</tr>";
                        $("#logTable").append(tr);
                    }
                }
            }

        });
    }
    function subTimes(start) {
        start=start.replace(new RegExp(/-/gm) ,"/"); 　　//将所有的'-'转为'/'即可
        var last = new Date(start).getTime();
        var now = new Date().getTime();
        var m=parseInt(Math.abs(now-last)/1000/60);
        $(".yellow").text(m);
    }
    function loginOut() {
        var paramStr = {};
        paramStr.machineId = machineId;
        paramStr.userId =userId;
        var params = {};
        params.paramStr = JSON.stringify(paramStr);
        Common.ajaxWithParam("/fenful/api/v1/machine/userLogout", params, function(data) {
            layer.msg("操作成功");
            $("#isActive").remove();
        });
    }
    function ifNull(str) {
        if(!str){
            return "";
        }else{
            return str;
        }
    }
</script>
</body>
</html>